<template>
	<div>
		<div class="cartoon">
			<div class="cartoon_list">
				<div class="list_on">
					<router-link :to="{name:'channel',params:{id:curTid}}" active-class="active">
						<p>推荐</p>
					</router-link>
					<router-link active-class="active" :to="{name:'channel',params:{id:item.tid}}" v-for="(item,index) in NavList" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
				</div>
			</div>
		</div>
		{{tid}}
	</div>
</template>

<script>
	let partionList = window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	export default {
		props: {
			tid: {
				type: [String, Number],
				default: 1
			}
		},
		created() {
			this.NavList=partionList[this.tid]
//			this._SetSecondNavList(this.$route.params.tid)	
		},
		data() {
			return {
				NavList: [],
				curTid: "1"
			}
		},
		watch: {
			$route(newValue) {
				this.$emit("PchangeTid", newValue.params.id)
				this._SetSecondNavList(newValue.params.id)
				//				console.log(newValue)
			},
			tid: function(newV) {
				//				实时更新NavList的内容
								this.navList =partionList[newV]
//				this.secondNavList = partionList[newV]
			}
		},
		computed: {
//			secondNavList: {
//				get: function() {
//					return this.NavList
//				},
//				set: function(newValue) {
//					if(newValue) {
//						//						console.log(newValue);
//						//						console.log(this.curTid)
//						this.curTid = this.tid
//						if(newValue) {
//							this.curTid = this.tid
//						}
//						this.NavList = partionList[this.curTid]
//					}
//				}
//			}
		},
		methods: {
			_SetSecondNavList(tid) {
				const hasCon = partionList[tid]
//				console.log(hasCon);
				if(!hasCon) {
//					遍历大对象的属性名(键名)
					let handleNav = function() {
						const keyArr = Object.keys(partionList)
//						console.log(keyArr)
						//					核心代码:tid==obj.tid
						for(let i = 0, len = keyArr.length; i < len; i++) {
//						一定要清楚,你访问的元素是什么
//						partionList[keyArr[i]]
//						console.log(partionList[keyArr[i]])
							const tmpArr = partionList[keyArr[i]]
							for(let j = 0; j < tmpArr.length; j++) {
								//							内循环
//								console.log(tmpArr[j])
								//							核心代码
								if(tmpArr[j].tid == tid) {
									return keyArr[i]
								}
//								console.log(111)
							}
						}
					}
					this.curTid = handleNav()
				} else {
					this.curTid = tid
				}
//				this.$store.commit("setCurTid",this.curtid)
				this.NavList = partionList[this.curTid]
			}
		}
	}
</script>

<style lang="scss">
	$maincolor:#fb7299;
	.cartoon_list {
		width: 100%;
		overflow: hidden;
		height: 37.6px;
		border-bottom: 1px solid #ccc;
		.list_on {
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
			padding-left: 18px;
			padding-bottom: 4.2px;
			background-color: #f9f9f9;
			height: 37.6px;
			line-height: 37.6px;
			z-index: 1;
			p {
				display: inline-block;
				font-size: 12px;
				color: #757575;
				margin-right: 18px;
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	.cartoon_list .list_on .active {
		p{
			color: $maincolor;
		}
		
	}
</style>